<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
    <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
    <%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<% String path = request.getContextPath();%> 
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>我的问题列表</title>
<link href="<%=path%>/static/usercss/css/all.css" rel="stylesheet" type="text/css">

<script type="text/javascript" src="<%=path%>/static/js/jquery-3.2.1.js"></script>
<!--[if IE]>
<script>
(function(){if(!/*@cc_on!@*/0)return;var e = "abbr,article,aside,audio,canvas,datalist,details,dialog,eventsource,figure,footer,header,hgroup,mark,menu,meter,nav,output,progress,section,time,video".split(','),i=e.length;while(i--){document.createElement(e[i])}})()
</script>
<![endif]-->
</head>
<body>
<jsp:include page="/WEB-INF/web/includ/header.jsp"></jsp:include>
<section>
<div class="wrap">
<div class="section">
    <article id="datalist">
      <nav>
    <div class="seach">
    <form action="<%=path %>/web/userinfo/chaXunById" method="post">
    <select name="firstType" id="firstType">
         <c:forEach items="${requestScope.firsttypes}" var="firsttype">
		 <option value="${firsttype.id}">${firsttype.title }</option>
		 </c:forEach>
    </select>
    <select name="secondType" id="secondType">
         <c:forEach items="${requestScope.secondtypes}" var="secondtype">
		 <option value="${secondtype.id}">${secondtype.title }</option>
		 </c:forEach>
    </select>
    <select name="rubbishId" id="rubbish">
         <c:forEach items="${requestScope.rubbishs}" var="rubbish">
		 <option value="${rubbish.id}">${rubbish.name }</option>
		 </c:forEach>
    </select>
   <input type="submit" name="submit" id="submit" value="查看分类">
   
    </form>
  </div>
</nav>
      <div id="title">
      <h1>我的问题列表</h1>
      <label>${rubbish.name }</label>
      <span><a href="<%=path %>/web/question/addQ.html">我要提问</a></span>
    </div>
    <datalist>
      <table width="684px" border="0" cellspacing="15" cellpadding="0">
        <tr>
          <th>问题内容</th>
          <th>发布时间</th>
          <th>答复数</th>
          <!-- <th>操作</th> -->
        </tr>
        
         <c:forEach items="${requestScope.questions.list}" var="question">
         <tr>
		<td class="textleft"><a href="<%=path %>/web/question/questionSingle?questionId=${question.id}">${question.content}</a></td>
      <td><fmt:formatDate pattern="yyyy/MM/dd HH:mm:ss" value="${question.inputTime }"></fmt:formatDate></td>
      <td>${question.replyCount }</td>
      <%-- <td><a href="<%=path %>/web/userinfo/change?id=${question.id}" class="edit-invalid">修改</a></td> --%>
       </tr>
      </c:forEach>
      
      </table>
    </datalist>
    
    <div class="pagination">
    <a id="first" href="<%=path%>/web/userinfo/qList?pageNum=1">« 第一页</a>
    <a href="<%=path%>/web/userinfo/qList?pageNum=${requestScope.questions.pageNum-1}" class="number">« 前一页</a>
    <c:forEach items="${requestScope.questions.navigatepageNums }" var="page">
		<a style="border:1px solid #ddd" id="page${page }" href="<%=path%>/web/userinfo/qList?pageNum=${page}">${page}</a>
		</c:forEach>
    <a href="<%=path%>/web/userinfo/qList?pageNum=${requestScope.questions.pageNum+1}" class="number">下一页 »</a>
    <a href="<%=path%>/web/userinfo/qList?pageNum=${requestScope.questions.pages}" class="number">最后 »</a>
    
  </div>
    <!-- <div class="pagination ">
      <a href="#" title="?">« 第一页</a>
      <a href="#" title="?">« 前一页</a>
      <a href="#" class="number current" title="?">1</a> 
      <a href="#" title="?">2</a> 
      <a href="#" title="?">下一页 »</a>
      <a href="#" title="?">最后 »</a>
    </div> -->
    </article>
  <jsp:include page="/WEB-INF/web/includ/aside.jsp"></jsp:include>  
</div>
</div>
</section>
<jsp:include page="/WEB-INF/web/includ/footer.jsp"></jsp:include>
</body>
<script type="text/javascript">
		$(function() {
		
			$("#page${requestScope.questions.pageNum}").css("background-color","#666");
			$("#page${requestScope.questions.pageNum}").css("color","#fff");
		  initSecondType(); 
			//给二级分类添加change事件
			$("#firstType").change(initSecondType);
			//给垃圾添加change事件
			$("#secondType").change(initRubbish);
		});
		
		function initSecondType() {
			
				var firstTypeId = $("#firstType").val();
				$("#secondType").empty();
			
		$.ajax({
					type : "POST",
					url : "<%=path%>/web/question/findAllByFirstTypeId",
					data : "firstTypeId="+firstTypeId,
					dataType:"json",
					success : function(secondtypes) {
					 for(var i=0;i<secondtypes.length;i++)
					 {
					 	$("#secondType").append("<option value=\""+secondtypes[i].id+"\">"+secondtypes[i].title+"</option>");
					 	
					 }	
					 
					//初始化三級
					 initRubbish(); 
						
					}
				}); 
			}
	
		function initRubbish() {
			
			var secondTypeId = $("#secondType").val();
			$("#rubbish").empty();
		
	$.ajax({
				type : "POST",
				url : "<%=path%>/web/question/findAllBySecondTypeId",
				data : "secondTypeId="+secondTypeId,
				dataType:"json",
				success : function(rubbishs) {
				 for(var i=0;i<rubbishs.length;i++)
				 {
				 	$("#rubbish").append("<option value=\""+rubbishs[i].id+"\">"+rubbishs[i].name+"</option>");
				 }						
				}
			}); 
		} 
	
		</script>
</html>
